<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改用户资料</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <style>
        /* reset.css */
        body {
            font-size: 12px !important;
            font-family: 'Microsoft Yahei', 'proxima-nova', helvetica, arial;
            -webkit-overflow-scrolling: touch;
        }

        input {
            -webkit-appearance: none;
            resize: none;
        }

        section {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            padding: 0;
            margin: 0;
        }

        h5 {
            font-style: normal;
            font-weight: normal;
        }

        img {
            border: 0;
            display: block;
            border: 0;
        }

        .clearfix:after {
            content: '';
            display: block;
            visibility: hidden;
            height: 0;
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        a {
            text-decoration: none;
            color: #969696;
        }

        a:hover {
            color: #fed503;
            text-decoration: none;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            outline: none;
        }

        /* 去掉 input 右边上下箭头 */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset !important;
        }

        /* 项目样式 */
        .process-status-new {
            width: 50%;
            background-color: #fff;
            height: 46px;
            padding-top: 24px;
            margin-left: 25%;
        }

        .process-status-new ul {
            margin: 0 36px;
            border-top: 1px solid #e5e5e5;
            height: 45px;
            position: relative;
        }

        .process-status-new ul li {
            position: absolute;
            float: left;
            width: 50%;
            top: -12px;
        }

        .process-status-new ul .p-gjj {
            left: 0;
        }

        .process-status-new ul .p-basic {
            left: 50%;
        }

        .process-status-new ul .p-edu {
            left: 100%;
        }

        /*.process-status-new ul .p-ok {*/
        /*    left: 100%;*/
        /*}*/

        /*.process-status-new .p-n-2 .p-basic span.l,*/
        /*.process-status-new .p-n-2 .p-gjj span.l,*/
        /*.process-status-new .p-n-3 .p-gjj span.l,*/
        /*.process-status-new .p-n-4 .p-gjj span.l */
        .jjjj {
            display: block !important;
        }

        .process-status-new ul li span.l {
            position: absolute;
            left: 0;
            top: 11px;
            width: 100%;
            z-index: 1;
            display: none;
            height: 1px;
            background-color: #439df8;
        }

        .process-status-new ul li .box {
            width: 88px;
            position: relative;
            margin-left: -44px;
            z-index: 2;
        }

        .process-status-new ul li .box .icon span {
            width: 17px;
            height: 17px;
            border: 2px solid #e5e5e5;
            display: block;
            border-radius: 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        /*.process-status-new .p-n-2 .p-basic .icon span,*/
        /*.process-status-new .p-n-2 .p-gjj .icon span,*/
        /*.process-status-new .p-n-3 .p-gjj .icon span,*/
        /*.process-status-new .p-n-4 .p-gjj .icon span */
        .jingdu1 {
            background-image: url(http://r.51gjj.com/image/static/20160518-bank-icon-cur2.png);
            background-size: 12px 12px;
            background-color: #ffffff;
            border: 2px solid #439df8 !important;
        }

        .process-status-new ul li .box .icon {
            width: 21px;
            height: 21px;
            padding: 1px;
            background-color: #fff;
            margin: 0 auto;
        }

        .process-status-new .p-n-2 .p-gjj p,
        .process-status-new .p-n-3 .p-gjj p,
        .process-status-new .p-n-4 .p-gjj p {
            color: #439df8;
        }

        .process-status-new ul li .box p {
            color: #b9b9b9;
            font-size: 12px;
            padding-top: 6px;
            line-height: 18px;
            text-align: center;
        }

    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend style="font-weight: bold;">修改资料</legend>
</fieldset>
<!--修改基本信息-->
<div style="border: 1px solid grey;margin:20px 70px 20px 70px;height: 400px;border-radius: 5px;">
    <h3 style="color: #1E9FFF;margin-left: 46%;margin-top: 30px;">用户信息</h3>
    <br><br>
    <div id="tbody" class="text-center">
        <form class="form-horizontal" role="form">
            <input type="hidden" th:value="${tEssential.cityid}" id="cityid">
            <input type="hidden" th:value="${tEssential.essentialid}" id="essentialid">
            <div class="form-group">
                <label class="col-sm-4 control-label">真实姓名</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="realname"
                           placeholder="" th:value="${tEssential.realname}" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">身证件号</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="identityId"
                           placeholder="" th:value="${tEssential.identityid}" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">现居城市</label>
                <div class="col-sm-5">
                    <select id="select_city" class="form-control"></select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label">住房状况</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="house" th:value="${tEssential.house}"
                           placeholder="请输入住房状况">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">邮政编码</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="postnum" th:value="${tEssential.postnum}"
                           placeholder="请输入邮政编码">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                    <a onclick="editInformation()" id="next1" class="btn-success btn btn-lg">确认修改</a>
                </div>
            </div>
        </form>
    </div>
</div>

<!--修改电话号码-->
<div style="border: 1px solid grey;margin:70px;height: 300px;border-radius: 5px;">
    <h3 style="color: #1E9FFF;margin-left: 46%;margin-top: 30px;">账户电话</h3>
    <br><br>
    <div class="text-center">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-4 control-label">电话号码</label>
                <div class="col-sm-5 col-xs-6 col-sm-4 col-md-4 col-lg-4">
                    <input type="text" id="phoneNum" autocomplete="off" th:value="${phoneNum}" class="form-control"
                           placeholder="请输入要修改的电话号码">
                </div>
                <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3" style="display: flex;float: left;">
                    <button type="button" class="btn btn-info" id="second">点击获取验证码</button>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">验证码</label>
                <div class="col-sm-5">
                    <input type="text" id="code" autocomplete="off" class="form-control" style="" placeholder="请输入验证码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                    <a onclick="editPhone()" class="btn-success btn btn-lg">确认修改</a>
                </div>
            </div>
        </form>
        <br>
        <br>
    </div>
</div>

<!--交易密码-->
<div style="border: 1px solid grey;margin:70px;height: 300px;border-radius: 5px;">
    <h3 style="color: #1E9FFF;margin-left: 46%;margin-top: 30px;">交易密码</h3>
    <br><br>
    <div class="text-center">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-4 control-label">原密码</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control" id="oldPwd"
                           placeholder="请输入原密码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">新密码</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control" id="newPwd"
                           placeholder="请输入新密码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">确认新密码</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control" id="repeatPwd"
                           placeholder="请再次输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                    <a onclick="editPwd()" id="" class="btn-success btn btn-lg">确认修改</a>
                </div>
            </div>
        </form>
        <br>
        <br>
    </div>
</div>

</body>
<script>

    function editInformation(){
        var cityid = $("#select_city").val();
        var house = $("#house").val();
        var postnum = $("#postnum").val();
        var essentialid = $("#essentialid").val();
        if (cityid == "") {
            alert("请输入现居地址");
            return;
        }
        if (house == "") {
            alert("请输入住房状况");
            return;
        }
        if (postnum == "") {
            alert("请输入邮政编码");
            return;
        }
        var data = {
            "cityid": cityid,
            "house": house,
            "postnum": postnum,
            "essentialid": essentialid
        }

        $.ajax({
            url: "/userInfo/editInformation",
            data: data,
            dataType: "json",
            type: "post",
            success: function (res) {
                if (res.code == 200) {
                    alert(res.message);
                    window.parent.frames[1].location.reload();
                } else {
                    alert(res.message);
                }
            },
            error: function () {
                alert(res.message);
            }
        })
    }


    $(function () {
        $.ajax({
            async: false,
            type: "GET",
            url: '/userInfo/editCity',
            success: function (res) {
                var data = res;
                console.log(data);
                var cityId = $('#cityid').val();
                console.log(cityId);
                for (var i = 0; i < data.length; i++) {
                    if (data[i].cityid == cityId) {
                        $('#select_city').append("<option name='cityid' value=" + data[i].cityid + " selected>" + data[i].city + "</option>");
                    } else {
                        $('#select_city').append("<option name='cityid' value=" + data[i].cityid + ">" + data[i].city + "</option>");
                    }
                }
            }
        });
    });



    //修改密码
    function editPwd() {
        var oldPwd = $("#oldPwd").val();
        var newPwd = $("#newPwd").val();
        var repeatPwd = $("#repeatPwd").val();
        if (oldPwd == "") {
            alert("请输入原密码");
            return;
        }
        if (newPwd == "") {
            alert("请输入新密码");
            return;
        }
        if (repeatPwd == "") {
            alert("请重复确认新密码");
            return;
        }
        if (newPwd != repeatPwd) {
            alert("新密码和重复输入的新密码不一致");
            return;
        }
        var data = {
            "oldPwd": oldPwd,
            "newPwd": newPwd
        }
        $.ajax({
            url: "/userInfo/editPwd",
            data: data,
            dataType: "json",
            type: "post",
            success: function (res) {
                if (res.code == 200) {
                    alert(res.message);
                    window.parent.frames[1].location.reload();
                } else {
                    alert(res.message);
                }
            },
            error: function () {
                alert(res.message);
            }
        })
    }


    //修改电话
    function editPhone() {
        var phoneNum = $("#phoneNum").val();
        var result = isPhoneNum();
        var code = $("#code").val();
        var data = {
            "phoneNum": phoneNum,
            "code": code
        }
        if (result) {
            $.ajax({
                url: "/userInfo/editPhone",
                data: data,
                dataType: "json",
                type: "post",
                success: function (res) {
                    if (res.code == 200) {
                        alert(res.message);
                        window.parent.frames[1].location.reload();
                    } else {
                        alert(res.message);
                    }
                },
                error: function () {
                    alert(res.message);
                }
            })
        }
    }

    $("#second").click(function () {
        sendyzm($("#second"));
    });

    //用ajax提交到后台的发送短信接口
    function sendyzm(obj) {
        var phoneNum = $("#phoneNum").val();
        var result = isPhoneNum();
        if (result) {
            $.ajax({
                url: "/userInfo/sendCode",
                data: {phoneNum: phoneNum},
                dataType: "json",
                type: "post",
                async: false,
                cache: false,
                success: function (res) {
                    debugger;
                    if (res.code == 200) {
                        alert(res.message);
                    } else {

                    }
                },
                error: function () {
                    alert(res.message);
                }
            });
            setTime(obj);//开始倒计时
        }
    }

    //60s倒计时实现逻辑
    var countdown = 60;

    function setTime(obj) {
        if (countdown == 0) {
            obj.prop('disabled', false);
            obj.text("点击获取验证码");
            countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
            return;
        } else {
            obj.prop('disabled', true);
            obj.text("(" + countdown + "s)后重新发送");
            countdown--;
        }
        setTimeout(function () {
            setTime(obj)
        }, 1000) //每1000毫秒执行一次
    }


    //校验手机号是否合法
    function isPhoneNum() {
        var phoneNum = $("#phoneNum").val();
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (!reg.test(phoneNum)) {
            alert('请输入有效的手机号码！');
            return false;
        } else {
            return true;
        }
    }


    function next1() {
        $.post("/credit/tgs1",
            "cardnum=" + $("#cardnum").val() +
            "&identityId=" + $("#identityId").val() +
            "&creditPwd=" + $("#creditPwd").val() +
            "&type=" + 2, function (data) {
                if (data != null) {
                    $("#tbody").html(data);
                    $("#p-basic2").attr("class", "jingdu1");
                    $("#p-basic1").attr("class", "jjjj l");
                } else {
                    alert("卡号与密码不符！！！")
                }
            }, "html"
        );
    }

    //正则验证身份证号
    $("#identityId").keyup(function () {
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        var identityId = $("#identityId").val();
        if (!reg.test(identityId)) {
            $("#identityId").css("border", "1px solid red");
            $("#next1").attr("disabled", true);
        } else {
            $("#identityId").css("border", "1px solid #ccc");
            $("#next1").attr("disabled", false);
        }
    })

    //正则验证信用卡号
    $("#cardnum").keyup(function () {
        var reg = /^([1-9]{1})(\d{14}|\d{18})$/;
        var cardnum = $("#cardnum").val();
        if (!reg.test(cardnum)) {
            $("#cardnum").css("border", "1px solid red");
            $("#next1").attr("disabled", true);
        } else {
            $("#cardnum").css("border", "1px solid #ccc");
            $("#next1").attr("disabled", false);
        }
    })

</script>
</html>